<template>
	<view class="page">
		<u-tabs :list="list" @click="tabsClick" :scrollable="false" :lineWidth="60" :lineHeight="6"/>
		<block v-if="index === 0">
			<view class="page-items" v-for="item in dataList" :key="item.orderNo">
				<view class="content">
					<view class="label">付款单号：{{item.orderNo}}</view>
					<view class="label">付款金额：{{(item.amount / 100).toFixed(2)}}</view>
					<view class="label">赠送金额：{{(item.giftBalance / 100).toFixed(2)}}</view>
					<view class="label">付款时间：{{item.createTime}}</view>
				</view>
				<u-line/>
			</view>
		</block>
		
		<block v-if="index === 1">
			<view class="page-items" v-for="item in dataList" :key="item.orderNo">
				<view class="top">
					<view class="top-flex">{{item.packageName}}</view>
					<view class="top-flex color">{{item.priceRmb}}元</view>
				</view>
				<u-line/>
				<view class="content">
					<view class="label">关联单号：{{item.orderNo}}</view>
					<view class="label">生效时间：{{item.isNextMonthName}}</view>
					<view class="label">套餐类型：{{item.investTypeName}}</view>
					<view class="label">充值时间：{{item.createTime}}</view>
				</view>
				<u-line/>
			</view>
			<u-loadmore :status="status" />
		</block>
		<block v-if="index === 2">
			<view class="page-items"  v-for="item in dataList" :key="item.orderNo">
				<view class="content">
					<view class="label">关联单号：{{item.orderNo}}</view>
					<view class="label">变动类型：
						<text v-if="item.flowType == 1" style="color: green;">余额充值 - 入账</text>
						<text v-if="item.flowType == 2" style="color: red;">流量订购 - 出账</text>
					</view>
					<view class="label">{{item.flowType == 1 ? '充值方式：' : '支付方式：'}}
						<text v-if="item.orderNo.indexOf('JD') == 0" >京东充值</text>
						<text v-else-if="item.orderNo.indexOf('WX') == 0" >微信充值</text>
						<text v-else-if="item.orderNo.indexOf('YE') == 0" >余额支付</text>
						<text v-else>客服充值</text>
					</view>
					<view class="label">变动金额：
						<text v-if="item.flowType == 1" style="color: green;">+{{(item.amount / 100).toFixed(2)}}</text>
						<text v-if="item.flowType == 2" style="color: red;">-{{(item.amount / 100).toFixed(2)}}</text>
					</view>
					<view class="label">变动时间：{{item.createTime}}</view>
				</view>
				<u-line/>
				<!-- <view class="f-btn">
					<u-button type="primary" :plain="true" text="查看详情"></u-button>
				</view> -->
			</view>
		</block>
	</view>
		
</template>

<script>
	export default{
		data(){
			return{
				list:[{ name: '余额充值记录' }, { name: '流量订购记录' }, { name: '个人账户流水' }],
				dataList:[],
				status: 'loadmore',
				page: 0,
				allPage: 0,
				index:0,
			}
		},
		created() {
			this.init()
		},
		onReachBottom(){
			if(this.page >= this.allPage) return ;
			this.status = 'loading';
			this.page = ++ this.page;
			setTimeout(() => {
				if(this.page >= this.allPage){
					this.status = 'nomore'
				}else{
					this.init2 ()
				}
			}, 2000)
		},
		methods:{
			init(){
				var params = {
					iccid: uni.getStorageSync('iccid') || '',
                    mobile: uni.getStorageSync('userPhone') || ''
				}
				this.$api.userOrder(params).then(res=>{
					this.dataList = res.data
				})
			},
			init2(){
				var params = {
					iccid: uni.getStorageSync('iccid') || '',
					pageNo: this.page,
					
                    mobile: uni.getStorageSync('userPhone') || ''
				}
				this.$api.listPage(params).then(res=>{
					this.dataList = res.data.resultList
				})
			},
			tabsClick(e){
				this.index = e.index
				this.dataList = []
				if(e.index === 0){
					this.init()
				}else if(e.index === 1){
					this.init2 ()
				}else {
					var params = {
						iccid: uni.getStorageSync('iccid') || '',
		                mobile: uni.getStorageSync('userPhone') || ''
					}
					this.$api.sysUserAccountFlowService(params).then(res=>{
						this.dataList = res.data
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.page{
		min-height:100vh;
		background: #f2f2f2;
		.page-items{
			background:#fff;
			margin-top:22upx;
			zoom:1;
			&::after{
				display: block;
				clear: both;
				content: "";
				visibility: hidden;
				height: 0;
			}
			.top{
				display: flex;
				justify-content: space-between;
				line-height:90upx;
				height:90upx;
				padding:0 4%;
				.top-flex{
					font-size:36upx;
					font-family: HarmonyOS_Sans_SC_Bold;
				}
				.color{
					color: red;
				}
			}
			.content{
				padding:16upx 0;
				.label{
					padding:0 4%;
					line-height:60upx;
					font-size:32upx;
				}
			}
			.f-btn{
				padding:16upx 4%;
				float: right;
				.u-button{
					width:200upx;
				}
			}
		}
	}
	.u-tabs{
		background: #fff;
	}
</style>